import axios from 'axios';
import { Options, Vue } from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import { taskStatus, taskType, timeFiledType } from '@/codelist';
import './form.less';

@Options({})
export class Form extends Vue {
    /**
     * 上下文
     *
     * @type {*}
     * @memberof Form
     */
    @Prop()
    context: any;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof Form
     */
    @Prop()
    viewparams: any;

    /**
     * 代码表
     *
     * @type {*}
     * @memberof Form
     */
    codelists: any = {};

    /**
     * 控件布局
     *
     * @type {*}
     * @memberof Form
     */
    wrapperCol: any = { span: 20 };

    /**
     * 标签布局
     *
     * @type {*}
     * @memberof Form
     */
    labelCol: any = { span: 4 };

    /**
     * 加载状态
     *
     * @type {boolean}
     * @memberof Form
     */
    loading: boolean = false;

    /**
     * Vue生命周期，实例创建完成
     *
     * @memberof Form
     */
    async created() {
        await this.load();
    }

    /**
     * 加载代码表
     *
     * @memberof SearchForm
     */
    async loadCodeList() {
        const params = { pageSize: 5000, pageNo: 1 };
        await this.$http.get('/api/1/database/config/1/page', params)
            .then((res: any) => {
                if (res && res.status === 200) {
                    const data = res.data;
                    if (data.code === 1) {
                        data.data.data.forEach((item: any) => {
                            item.key = item.id;
                            item.value = item.name;
                        });
                        this.codelists.config = data.data.data;
                    }
                }
            })
            .catch((err: any) => {
                console.log(err);
            });
    }

    /**
     * 表单加载
     *
     * @memberof Form
     */
    async load() {
        this.loading = true;
        await this.loadCodeList();
        if (this.context.id) {
            await this.$http.get('/api/1/execute/rules/web/detail', {
                id: this.context.id,
            })
                .then((response: any) => {
                    if (response && response.status === 200) {
                        const data = response.data;
                        if (data.code === 1 && data.data) {
                            Object.assign(this.formData, data.data);
                        }
                    }
                });
        }
        this.loading = false;
    }

    /**
     * 表单信息
     *
     * @type {any[]}
     * @memberof Form
     */
    formDetails: any[] = [
        {
            prop: 'configId',
            label: '数据源',
            type: 'select',
            codelistName: 'config',
            rules: [
                {
                    required: true,
                    message: '数据源不能为空',
                    trigger: 'blur',
                },
            ],
        },
        {
            prop: 'tableName',
            label: '表名',
            type: 'text',
            rules: [
                {
                    required: true,
                    message: '表名不能为空',
                    trigger: 'blur',
                },
            ],
        },
        {
            prop: 'alarmAmount',
            label: '预警值',
            type: 'number',
            rules: [
                {
                    required: true,
                    message: '预警值不能为空',
                    trigger: 'blur',
                },
            ],
        },
        {
            prop: 'timeFiled',
            label: '时间字段',
            type: 'text',
            rules: [
                {
                    required: true,
                    message: '时间字段不能为空',
                    trigger: 'blur',
                },
            ],
        },
        {
            prop: 'timeType',
            label: '时间类型',
            codelist: timeFiledType,
            type: 'select',
            rules: [
                {
                    required: true,
                    message: '时间类型不能为空',
                    trigger: 'blur',
                },
            ],
        },
        {
            prop: 'status',
            label: '有效状态',
            codelist: taskStatus,
            type: 'select',
            rules: [
                {
                    required: true,
                    message: '有效状态不能为空',
                    trigger: 'blur',
                },
            ],
        },
        {
            prop: 'type',
            label: '任务类型',
            codelist: taskType,
            type: 'select',
            rules: [
                {
                    required: true,
                    message: '任务类型不能为空',
                    trigger: 'blur',
                },
            ],
        },
        {
            prop: 'statements',
            label: '执行语句',
            type: 'text',
        },
        {
            prop: 'description',
            label: '描述',
            type: 'textarea',
        },
    ];

    /**
     * 表单数据
     *
     * @type {FormData}
     * @memberof Form
     */
    formData: any = {
        configId: null,
        tableName: null,
        timeFiled: null,
        timeType: null,
        status: null,
        type: null,
        statements: null,
        description: null,
    };

    /**
     * 绘制函数
     *
     * @return {*}
     * @memberof Form
     */
    render() {
        return (
            <div class='form'>
                <el-form
                    ref='form'
                    v-loading={this.loading}
                    model={this.formData}
                    label-col={this.labelCol}
                    wrapper-col={this.wrapperCol}
                >
                    {this.formDetails.map((item: any) => {
                        return this.renderFormItem(item);
                    })}
                </el-form>
            </div>
        );
    }

    renderFormItem(item: any) {
        switch (item.type) {
            case 'text':
                return this.renderInput(item);
            case 'textarea':
                return this.renderInput(item);
            case 'number':
                return this.renderInput(item);
            case 'select':
                return this.renderSelect(item);
            default:
                return this.renderInput(item);
        }
    }

    /**
     * 绘制输入框
     *
     * @param {*} item
     * @return {*}
     * @memberof Form
     */
    renderInput(item: any) {
        return (
            <el-form-item prop={item.prop} label={item.label} rules={item.rules}>
                <el-input v-model={this.formData[item.prop]} placeholder={`请输入${item.label}`} type={item.type} />
            </el-form-item>
        );
    }

    /**
     * 绘制选择器
     *
     * @param {*} item
     * @memberof Form
     */
    renderSelect(item: any) {
        return (
            <el-form-item prop={item.prop} label={item.label} rules={item.rules}>
                <el-select v-model={this.formData[item.prop]} placeholder={item.label}>
                    {item.codelist
                        ? item.codelist.map((listItem: any) => {
                            return (
                                <el-option key={listItem.key} value={listItem.key} label={listItem.value}></el-option>
                            );
                        })
                        : null}
                    {item.codelistName && this.codelists[item.codelistName]
                        ? this.codelists[item.codelistName].map((listItem: any) => {
                            return (
                                <el-option key={listItem.key} value={listItem.key} label={listItem.value}></el-option>
                            );
                        })
                        : null}
                </el-select>
            </el-form-item>
        );
    }
}
